<template>
  <a-button type="primary" @click="getUsers">查询数据</a-button>
  <a-button type="primary" @click="addUser">添加用户</a-button>
  <div>
    <a-table :columns="columns" :data-source="table_list">
      <template #bodyCell="{ column, text, record }">
        <template v-if="column.dataIndex === 'option'">
          <a-button type="primary" @click="showUser(record)">查看</a-button>
        </template>
      </template>
    </a-table>

  </div>

  <a-modal v-model:open="user_open" :title="title" @ok="endOk" ok-text="确认" cancel-text="取消">
    <UserModal :user="user_view"></UserModal>
  </a-modal>

  <a-modal v-model:open="user_update" :title="title" @ok="handleOk" ok-text="添加" cancel-text="取消">
    <UserModal ref="userForm" :user="user_view"></UserModal>
  </a-modal>
</template>

<script setup lang="ts">
import http from "axios";
import {ref} from "vue";
import {message} from "ant-design-vue";
import {SysUserClass} from "@/interface/SysUser.ts";
import UserModal from "@/components/sys/sysUser/UserModal.vue";

let table_list = ref([] as SysUserClass[])

function getUsers() {
  http.get('/user').then(res => {
    if (res.data == null || res.data === '') {
      message.error('暂无数据')
    }
    table_list.value = res.data.data
  })
}

// 初始化数据
getUsers()
const columns = [
  {key:'userId',  dataIndex: 'userId', title: '用户ID'},
  {key:'username',  dataIndex: 'username', title: '用户名称'},
  {key:'password',  dataIndex: 'password', title: '密码'},
  {key:'email',  dataIndex: 'email', title: '邮件'},
  {key:'phone',  dataIndex: 'phone', title: '手机号'},
  {key:'nickname',  dataIndex: 'nickname', title: '昵称'},
  {key:'avatar',  dataIndex: 'avatar', title: '头像'},
  {key:'status',  dataIndex: 'status', title: '状态'},
  {key:'updatedTime',  dataIndex: 'updatedTime', title: '更新时间'},
  {key:'score',  dataIndex: 'score', title: '得分'},
  {key:'option',  dataIndex: 'option', title: '操作'},
]



let user_view = new SysUserClass()
const user_open = ref<boolean>(false);
const user_update = ref<boolean>(false);
const showUser = (column:SysUserClass) => {
  user_view = column
  title.value = '查看用户'
  user_open.value = true;
};
const addUser = () => {
  user_view = new SysUserClass()
  title.value = '添加用户'
  user_update.value = true;
};
const userForm = ref()
// 确认添加用户
const handleOk = (e: MouseEvent) => {
  user_view = new SysUserClass()
  userForm.value.submit()
  //user_update.value = false;
};
const endOk = (e: MouseEvent) => {
  user_view = new SysUserClass()
  user_open.value = false;
};
let title = ref('')

</script>

<style scoped>

</style>